<h1>指令</h1>

<p>avalon的绑定（或指令），这是定义在HTML中的特殊标记，代替我们操作DOM的一种DSL。
    它拥有以下三种类型：<p>
<ul>
    <li ms-skip>{{}}插值表达式， 这是开标签与闭标签间，换言之，也是位于文本节点中，innerText里。{{}}里面可以添加各种过滤器（以|进行标识）。
        值得注意的是{{}}实际是文本绑定(ms-text)的一种形式。</li>
    <li>ms-*绑定属性， 这是位于开标签的内部， 95%的绑定都以这种形式存在。
        它们的格式大概是这样划分的
        <span style="color:green">"ms" + type + "-" + param1 + "-" + param1 + "-" + param2 + ... + number = value</span>
    <xmp class="css">
        ms-skip                //这个绑定属性没有值
        ms-controller="expr"   //这个绑定属性没有参数
        ms-if="expr"           //这个绑定属性没有参数
        ms-if-loop="expr"       //这个绑定属性有一个参数
        ms-repeat-el="array"    //这个绑定属性有一个参数
        ms-attr-href="xxxx"    //这个绑定属性有一个参数
        ms-attr-src="xxx/{{a}}/yyy/{{b}}"   //这个绑定属性的值包含插值表达式，注意只有少部分表示字符串类型的属性可以使用插值表达式
        ms-click-1="fn"       //这个绑定属性的名字最后有数字，这是方便我们绑定更多点击事件 ms-click-2="fn"  ms-click-3="fn"
        ms-on-click="fn"     //只有表示事件与类名的绑定属性的可以加数字，如这个也可以写成  ms-on-click-0="fn"
        ms-class-1="xxx" ms-class-2="yyy" ms-class-3="xxx" //数字还表示绑定的次序
        ms-css-background-color="xxx" //这个绑定属性有两个参数，但在css绑定里，相当于一个，会内部转换为backgroundColor
        ms-duplex-aaa-bbb-string="xxx"//这个绑定属性有三个参数，表示三种不同的拦截操作

    </xmp>
</li>
<li>
    data-xxx-yyy="xxx"，辅助指令，比如ms-duplex的某一个辅助指令为data-duplex-event="change"，ms-repeat的某一个辅助指令为data-repeat-rendered="yyy"
</li>
</ul>
<p>在1.4.5中新增<b>一次性绑定</b>，就在原来的文本节点的最前面加入::，如<b ms-skip>{{aaa}}</b>改成 <b ms-skip>{{::aaa}}</b>，
    ms-*属性的值最前面加上::，如<b ms-skip>ms-attr-value="aaa"</b>改成 <b ms-skip>ms-attr-value="::aaa"</b>。
    一次性绑定只渲染视图一次，下次vm.aaa发生改动，不会再同步视图。这非常适用纯数据展示的表格。如果ms-*属性的值里面有<span ms-skip>{{}}</span>，不能
    在这些花括号里面加 ::
</p>
<p>有一个第三方绑定指令ms-l20n提供国际化能力。如果需要提供国际化页面可以使用，用法参见<a href="https://pinghe.github.io/avalon.components/l20n/examples/examples.html">这里</a></p>
<p>灰色代表已被废弃，蓝色是常用，红色是必须，橙色是最新增的</p>

<div>
    <img src="../../assets/css/directives/bindings.png"/>
</div>
<br/>
<div class="panel panel-default">
    <div class="panel-heading">一次性绑定</div>
    <div class="panel-body">
        <p>该特性是<code>avalon1.4.5</code>新增的.</p>
        <p>avalon所有绑定(或叫指令),根据其作用次数与方向,分为三类:单次, 单向, 双向.</p>
        <p>单次是指只在扫描时发生一次效果, 以后VM的属性发生改动, 也不会影响视图对应位置的区域</p>
        <p>单向是指, 当VM的属性发生变化时, 视图对应区域会跟着变化, 并总是从VM-->V</p>
        <p>双向仅仅是指ms-duplex这个指令(当然,它还衔生出许多子指令,如ms-duplex-string,
            ms-duplex-boolean, ms-duplex-number, ms-duplex-checked), 当VM发生改动时, V会跟着变化
            当V发生改动时,VM也会变化.V在这里具体指表单元素,在div, span绑定ms-duplex是没有意义的.</p>
        <h4>如何使用单次绑定?</h4>
        <p>我们只需要在插值表达式的最前面加上 ::, 或是在绑定属性的值的最前面加上 :: ,该绑定就变成单次绑定</p>
        <xmp class="html">
            <!DOCTYPE html>
            <html>
                <head>
                    <title>Avalon by RubyLouvre</title>
                    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                    <script src="avalon.js" ></script>
                    <script>
            var vm = avalon.define({
                $id: 'test',
                value: "xxx",
                text: "yyy"
            })

                    </script>
                </head>
                <body>
                    <div ms-controller="test">
                        <input ms-attr-value="::value"/>
                        <p>{{::text}}</p>
                    </div>
                </body>
            </html>
        </xmp>
    </div>
</div>


